<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <a-button type="primary" icon="plus" @click="add">{{
                            $ti18('rxList.newBtn', '新建')
                        }}</a-button>
                        <a-dropdown
                            v-if="
                                removeEnable && selectedRowKeys.length > 0 && editEnable && selectedRowKeys.length > 0
                            "
                        >
                            <a-button style="margin-left: 8px">
                                {{ $ti18('rxList.moreBtn', '更多') }}
                                <a-icon type="down" />
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item
                                    key="1"
                                    @click="editOne"
                                    v-if="editEnable && selectedRowKeys.length > 0"
                                    alias="formRuleEdit"
                                    :butn-type="'primary'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="edit" />
                                    {{ $ti18('rxList.editBtn', '编辑') }}
                                </a-menu-item>
                                <a-menu-item
                                    key="2"
                                    @click="delByIds(selectedRowKeys)"
                                    v-if="removeEnable && selectedRowKeys.length > 0"
                                    alias="formRuleDelete"
                                    :butn-type="'danger'"
                                    :show-no-right="false"
                                >
                                    <a-icon type="delete" />
                                    {{ $ti18('rxList.delBtn', '删除') }}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow"
                            ><i class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span
                        >
                    </span>
                </div>
                <div
                    btnalign="right"
                    slot="searchbar"
                    v-if="fitSearch"
                    @search="search"
                    @cancel="cancel"
                    @close="closeSearchbar"
                >
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.subject', '标题')">
                                    <a-input
                                        :placeholder="i18n('form.subject', '标题', 'input')"
                                        v-model="queryParam.Q_SUBJECT__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.abstract', '摘要')">
                                    <a-input
                                        :placeholder="i18n('form.abstract', '摘要', 'input')"
                                        v-model="queryParam.Q_KEYWORDS__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-portal/portal/core/insNews/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="newId"
                    @selectChange="onSelectChange"
                >
                    <span slot="subject" slot-scope="{ text, record }">
                        <a-tag :color="'green'">
                            {{ record.sysDicName }}
                        </a-tag>
                        <a @click="showNewsDetail(record)">{{ record.subject }}</a>
                    </span>
                    <span slot="author" slot-scope="{ text, record }">
                        <a-tag :color="'green'">
                            <rx-user-info :userId="record.author" :showAccount="true"></rx-user-info>
                        </a-tag>
                    </span>

                    <span slot="status" slot-scope="{ text, record }">
                        <a-tag :color="statusMap[text].color">
                            <span>{{ statusMap[text].text }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="editEnable" @click.stop="edit(record)">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                        <span v-if="removeEnable" @click.stop="delByIds([record.newId])">{{
                            $ti18('rxList.delBtn', '删除')
                        }}</span>
                        <span @click="getInsNews(record.pkId)">{{ $ti18('rxList.preview', '预览') }}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import InsNewsApi from '@/api/portal/core/insNews'
import newsPortal from '@/api/portal/core/newsPortal'
import InsNewsEdit from './InsNewsEdit'

import { BaseList, RxUserInfo, Util } from '@lowcode/jpaas-common-lib'

export default {
    name: 'InsNewsList',
    mixins: [BaseList, newsPortal],
    components: {
        'rx-user-info': RxUserInfo,
    },
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    type: 'indexColumn',
                    scopedSlots: { customRender: 'serial' },
                    width: 40,
                },
                {
                    title: this.i18n('form.subject', '标题'),
                    dataIndex: 'subject',
                    width: 200,
                    scopedSlots: { customRender: 'subject' },
                },
                { title: this.i18n('form.readTimes', '阅读次数'), dataIndex: 'readTimes', width: 80 },
                {
                    title: this.i18n('form.author', '作者'),
                    dataIndex: 'author',
                    width: 120,
                    scopedSlots: { customRender: 'author' },
                },
                {
                    title: this.i18n('form.status', '状态'),
                    dataIndex: 'status',
                    width: 110,
                    scopedSlots: { customRender: 'status' },
                },
                { title: this.$ti18('rxForm.createTime', '创建时间'), dataIndex: 'createTime', width: 120 },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    width: Util.langSize({ 'zh-CN': 80, 'en-US': 200, 'ja-JP': 240, 'es-ES': 200 }),
                },
            ],
            component: InsNewsEdit,
            comment: this.i18n('list.comment', '信息公告'),
            widthHeight: ['1000px', '650px'],
            statusMap: {
                Issued: { color: 'green', text: this.i18n('form.publish', '发布') },
                Draft: { color: 'red', text: this.i18n('form.draft', '草稿') },
            },
        }
    },
    methods: {
        getTitle(label, type) {
            let obj = {
                Draft: { color: '#ff6666', text: this.i18n('form.draft', '草稿'), bgColor: '#ffeded' },
                Issued: { color: '#52c41a', text: this.i18n('form.publish', '发布'), bgColor: '#f6ffed' },
            }

            return `<div style="font-weight: bold;">${label}-${this.comment}<span
            style="color: ${obj[type].color};background: ${obj[type].bgColor};border-radius: 4px;margin-left: 10px;font-size: 12px;padding: 2px 6px;font-weight: normal;"
            >${obj[type].text}</span>
            </div>`
        },
        add() {
            let label = this.$ti18('rxList.newBtn', '添加')
            let title = this.getTitle(label, 'Draft')
            let conf = {
                component: this.component,
                title,
                urlType: 'Add',
                widthHeight: this.widthHeight,
                openType: this.openType,
            }
            this.handleEdit(conf)
        },
        edit(record) {
            let label = this.$ti18('rxList.editBtn', '编辑')
            let title = this.getTitle(label, 'Issued')
            let conf = {
                pkId: record.pkId,
                component: this.component,
                title,
                urlType: 'Edit',
                widthHeight: this.widthHeight,
                openType: this.openType,
            }
            this.handleEdit(conf)
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'InsNews', key)
        },
        delById(ids) {
            return InsNewsApi.del({ ids: ids.join(',') })
        },
        getListByParams(parameter) {
            return InsNewsApi.query(parameter)
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false
        },
        //显示消息明细
        showNewsDetail(record) {
            var self_ = this
            InsNewsApi.getInsNews(
                {
                    curVm: this,
                    data: { pkId: record.newId, single: true, readonly: true },
                    widthHeight: ['1000px', '700px'],
                },
                function (self_, data) {}
            )
        },
    },
}
</script>
<style scoped></style>
